<template>
  <div class="app-container">
    <el-button type="success" size="mini" @click="showAddDialog()"
      >添加</el-button
    >
    <el-table :data="list" fit border style="width: 100%">
      <el-table-column fixed prop="id" label="ID"> </el-table-column>
      <el-table-column prop="name" label="角色名"> </el-table-column>
      <el-table-column prop="code" label="角色编号"> </el-table-column>
      <el-table-column prop="remark" label="角色备注"> </el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            title="修改"
            @click="showUpdateDialog(scope.row.id)"
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            title="删除"
            @click="handleDelete(scope.row.id)"
          ></el-button>
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-setting"
            title="权限分配"
            @click="showAssignedPermissionDialog(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="selectByPage"
      :current-page="page"
      :total="total"
      :page-size="limit"
      layout="total, prev, pager, next"
    >
    </el-pagination>

    <!-- 添加、修改的dialog -->
    <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%">
      <el-form ref="form" :model="role" label-width="80px">
        <el-form-item label="角色名">
          <el-input v-model="role.name"></el-input>
        </el-form-item>
        <el-form-item label="角色编码">
          <el-input v-model="role.code"></el-input>
        </el-form-item>
        <el-form-item label="角色备注">
          <el-input v-model="role.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addOrUpdate">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      title="分配权限"
      :visible.sync="dialogPermissionVisible"
      width="40%">
      <el-tree
        :data="treeData"
        show-checkbox
        node-key="id"
        ref="tree"
        default-expand-all
        :props="defaultProps">
      </el-tree>
      <div slot="footer">
        <el-button type="primary" @click="assignPermission">保存</el-button>
        <el-button  @click="dialogPermissionVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
//引入role.js
import roleApi from "@/api/rbac/role";
import permissionApi from "@/api/rbac/permission";

export default {
  name: "",
  data() {
    return {
      list: null, //表格对应的数据
      page: 1, //当前页
      limit: 5, //每页有多少条
      total: 0, //总记录数

      //添加、编辑相关代码
      dialogVisible: false, //添加、修改dialog
      role: {}, //添加、修改对应封装的role对象

      //添加权限相关
      dialogPermissionVisible: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    };
  },
  created() {
    this.selectByPage(this.page);
  },
  methods: {
    selectByPage(page = 1) {
      this.page = page;
      roleApi.selectByPage(this.page, this.limit).then((jsonResult) => {
        console.log(jsonResult);
        this.list = jsonResult.data.list;
        //Invalid prop: type check failed for prop "total". Expected Number with value 8, got String with value "8".
        //把long类型转换成Number类型
        this.total = jsonResult.data.total - 0;
      });
    },
    handleDelete(id) {
      //弹出确认删除的提示框
      this.$confirm("您确认要删除么?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      }).then(() => {
        roleApi.deleteById(id).then((jsonResult) => {
          if (jsonResult.ok) {
            this.$message({
              type: "success",
              message: jsonResult.msg,
            });
            //删除成功之后，查询最新的数据
            this.selectByPage();
          } else {
            this.$message({
              type: "error",
              message: jsonResult.msg,
            });
          }
        });
      });
    },
    //添加、编辑相关代码
    showAddDialog() {
      this.dialogVisible = true;
      this.role = {};
    },
    showUpdateDialog(id) {
      this.dialogVisible = true;
      this.role = {};
      roleApi.selectById(id).then((jsonResult) => {
        this.role = jsonResult.data;
        console.log(this.role.avatar);
        if (this.role.avatar) {
          this.image = this.role.avatar;
        }
      });
    },
    addOrUpdate() {
      if (!this.role.id) {
        roleApi.add(this.role).then((jsonResult) => {
          if (jsonResult.ok) {
            this.$message({
              type: "success",
              message: jsonResult.msg,
            });
            //关闭弹出框
            this.dialogVisible = false;
            this.selectByPage();
          } else {
            this.$message({
              type: "error",
              message: jsonResult.msg,
            });
          }
        });
      } else {
        roleApi.update(this.role).then((jsonResult) => {
          if (jsonResult.ok) {
            this.$message({
              type: "success",
              message: jsonResult.msg,
            });
            this.dialogVisible = false;
            this.selectByPage();
          } else {
            this.$message({
              type: "error",
              message: jsonResult.msg,
            });
          }
        });
      }
    },
    showAssignedPermissionDialog(row) {
      this.role = row;
      this.dialogPermissionVisible = true;
      this.treeData = [];
      permissionApi.selectAssignedPermission(row.id).then((jsonResult) => {
        if (jsonResult.ok) {
          this.treeData = jsonResult.data.permissionVOList;
          let checkedLeafIdList = [];
          this.getCheckedLeafIdList(jsonResult.data.permissionVOList, jsonResult.data.assignedPermissionIdList, checkedLeafIdList);
          this.$refs.tree.setCheckedKeys(checkedLeafIdList);
        }
      });
    },
    getCheckedLeafIdList(permissionVOList, assignedPermissionIdList, checkedLeafIdList) {
      permissionVOList.forEach(permissionVO => {
        assignedPermissionIdList.forEach(id => {
          //这个角色下面的权限，而且是没有孩子的叶子节点
          if (permissionVO.id==id && permissionVO.children.length == 0) {
            checkedLeafIdList.push(id);
          } else if(permissionVO.id==id && permissionVO.children.length != 0) {
            this.getCheckedLeafIdList(permissionVO.children, assignedPermissionIdList, checkedLeafIdList);
          }
        })
      });
    },
    assignPermission() {
      let checkedNodes = this.$refs.tree.getCheckedNodes(false, true);
      console.log(checkedNodes);
      let permissionIds = checkedNodes.map((node) => node.id);
      permissionIds = permissionIds.join(',');
      permissionApi.assignPermission(this.role.id, permissionIds).then((jsonResult) => {
        if (jsonResult.ok) {
          this.$message({
              type: "success",
              message: jsonResult.msg,
          });
          this.dialogPermissionVisible = false;
        }
      });
    }
  },
};
</script>
 
<style scoped>
</style>